// 传统单例模式： 保证一个类仅有一个实例，并提供一个访问它的全局访问点。
// 实现单例的核心思想：
// 无非是用一个变量来标志当前是否已经为某个类创建过对象，如果是，则在下一次获取该类的实例时，直接返回之前创建的对象。
// 单例常用场景：
/*
    只需要生成一个唯一对象的时候，比如说页面登录框，只可能有一个登录框，那么你就可以用单例的思想去实现他，当然你不用单例的思想实现也行，那带来的结果可能就是你每次要显示登陆框的时候都要重新生成一个登陆框并显示（耗费性能），或者是不小心显示出了两个登录框
*/

// 类是所有代码的封装通用模式， 单例类似于缓存，可以减少服务器压力
export default class SocketService {
  /**
   * 单例
   */
  // 静态属性
  static instance = null
  static get Instance () {
    if (!this.instance) {
      this.instance = new SocketService()
    }
    return this.instance
  }

  // 和服务端连接的socket对象
  ws = null

  // 标识是否连接成功
  connected = false

  sendRetryCount = 0

  connectRetryCount = 0

  // 存储回调函数
  callBackMapping = {
  }

  // 定义连接服务器的方法
  connect () {
    // 判断 浏览器支不支持WebSocket
    if (!window.WebSocket) {
      return console.log('您的浏览器不支持WebSocket')
    }
    // 连接服务端
    this.ws = new WebSocket('ws://localhost:9998')
    // 连接成功的事件
    this.ws.onopen = () => {
      console.log('连接服务端成功')
      this.connected = true
      this.connectRetryCount = 0
    }
    // 断开服务端 或 连接服务端失败
    this.ws.onclose = () => {
      console.log('连接服务端失败')
      this.connected = false
      // 【优化】：断开重连机制
      this.connectRetryCount++
      setTimeout(() => {
        this.connect()
      }, this.connectRetryCount * 500)
    }
    // 得到服务端发送过来的数据
    this.ws.onmessage = msg => {
      console.log('从服务端获取到的数据：', msg.data)
      const receiveData = JSON.parse(msg.data)
      // socketType：前端响应函数的标识
      const socketType = receiveData.socketType
      // 判断回调函数是否存在
      if (this.callBackMapping[socketType]) {
        const action = receiveData.action
        let realData = null
        switch (action) {
          case 'getData':
            // realData 真正的图表所需数据
            realData = JSON.parse(receiveData.data)
            this.callBackMapping[socketType].call(this, realData)
            break
          case 'fullScreen':
            this.callBackMapping[socketType].call(this, receiveData)
            break
          case 'themeChange':
            this.callBackMapping[socketType].call(this, receiveData)
            break
        }
      }
    }
  }

  // 回调函数的注册
  registerCallBack (socketType, callBack) {
    this.callBackMapping[socketType] = callBack
  }

  // 回调函数的注销
  unRegisterCallBack (socketType) {
    this.callBackMapping[socketType] = null
  }

  // 发送数据的方法
  send (data) {
    if (this.connected) {
      this.sendRetryCount = 0
      this.ws.send(JSON.stringify(data))
    } else {
      // 【优化】：延时重发数据机制
      this.sendRetryCount++
      setTimeout(() => { this.send(data) }, this.sendRetryCount * 500)
    }
  }
}

// class Test {
//   // 类的静态属性
//   static num1 = 6
//   // 实例对象的属性
//   num2 = 3

//   static sum () {
//     console.log(this)
//   }
// }
// const test = new Test()
// console.log(test)
// console.log(Test.num1)
// Test.sum()
